<template>
  <div class="goodsShuxingIndex">
    <el-card class="box-card">
      <!-- one------------------------------------------------------- -->
      <div slot="header" class="clearfix header">
        <span>商品属性</span>
        <el-button type="primary" round @click="createFn" class="button1"
          >创建</el-button
        >
        <el-button type="primary" round @click="createtwoFn">返回</el-button>
      </div>
      <!-- -------------------------------------------------------------- -->

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="cat_name"
          label="所属商品类型"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="attr_id"
          label="编号"
          width="180"
        ></el-table-column>
        <el-table-column prop="attr_name" label="属性名称"> </el-table-column>
        <el-table-column prop="only_many" label="数量"> </el-table-column>
        <el-table-column prop="input_select" label="录入方式">
        </el-table-column>
        <el-table-column prop="attr_values" label="可选值"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editFn(scope.row)"
            >
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(scope.row.attr_id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="编辑商品类型"
        :visible.sync="isShowEditTk"
        width="30%"
        :before-close="handleClose"
      >
        <!-- form -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="属性名称">
            <el-input
              type="text"
              v-model="ruleForm.attr_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- /form -->
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowEditTk = false">取 消</el-button>
          <el-button type="primary" @click="submitEditFn">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getShuxingIndex, deleteShuxingIndex, putShuxingIndex } from "@/api";
export default {
  created() {
    this.initData();
  },
  methods: {
    //编辑
    editFn(row) {
      //显示默认数据显示
      this.ruleForm.type_name = row.attr_name;
      this.ruleForm.attr_id = row.attr_id;
      this.ruleForm.cat_id = row.cat_id;
      this.ruleForm.only_many = row.only_many;
      this.ruleForm.attr_name = row.attr_name;
      this.ruleForm.input_select = row.input_select;
      this.ruleForm.attr_values = row.attr_values;

      //显示编辑弹框
      this.isShowEditTk = true;
    },
    //点击编辑后出现的弹框去点击确认，从而发送异步请求
    submitEditFn() {
      this.isShowEditTk = false;
      putShuxingIndex(this.ruleForm).then(res => {
        // console.log(res)
        if (res.meta.state == 200) {
          this.$message.success(res.meta.msg);
          this.initData();
        } else {
          this.$message.error(res.meta.msg);
        }
      });
    },

    //删除
    delFn(iid) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteShuxingIndex({
            attr_id: iid
          }).then(res => {
            // console.log(res)
            if (res.meta.state == 200) {
              this.$message.success(res.meta.msg);
            } else {
              this.$message.error(res.meta.msg);
            }
            this.initData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    //点创建按钮去属性列表
    createFn() {
      this.$router.push({ path: "/goods/attr/create" });
    },

    //切换每页页数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.initData();
    },
    //切换分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.initData();
    },

    //点返回进入商品类型
    createtwoFn() {
      this.$router.push({ path: "/goods/type/create" });
    },

    //请求接口渲染数据（initData是为了后面调用)
    initData() {
      getShuxingIndex({
        pagenum: this.pagenum,
        pagesize: this.pagesize,
        type_id: 0
      }).then(res => {
        console.log(res);
        this.tableData = res.data.list;
        this.pagetotal = parseInt(res.data.total);
      });
    }
  },
  data() {
    return {
      //列表接口参数
      pagenum: 1,
      pagesize: 5,
      type_id: 0,
      pagetotal: 0,

      isShowEditTk: false,

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      ruleForm: {
        type_name: "",
        attr_id: "",
        cat_id: "",
        attr_name: "",
        input_select: "",
        only_many: "",
        attr_values: "",
        cat_name: ""
      },

      rules: {
        //键 ruleForm里面的键
        //值 数组里面是一个个对象 赋值
        type_name: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },

      tableData: []
    };
  }
};
</script>

<style lang="scss" scoped>
.goodsShuxingIndex {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .button1 {
      margin-left: 700px;
    }
  }
}
</style>
